<!--
 * @Autor: Ruohong Yu
 * @Date: 2023-03-12 12:14:57
 * @Description: file content
 * @FilePath: \ebook\src\components\common\steps.vue
-->
<template>
  <div class="steps-box">
    <div v-for="(item, index) in stepsData"
        class="steps-card"
        :class="index <= stepsIndex ? 'on' : ''"
        :key="index">
      <span>{{ index + 1 }}</span>
      <span>{{ item.name }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'steps',
  data: function () {
    return {
      stepsIndex: '',
      stepsData: []
    }
  },
  created () {
    this.stepsIndex = this.$parent.stepsIndex
    this.stepsData = this.$parent.stepsData
  },
  methods: {
    // 下一步
    stepsFun () {
      this.stepsIndex = this.$parent.stepsIndex
    }
  }
}
</script>

<style lang="scss" scoped>
.steps-box {
  z-index: 2001;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: px2rem(10);
  .steps-card {
    width: 25%;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: rgba(0, 0, 0, 0.25);
    position: relative;
    font-size: px2rem(15);
    span:nth-of-type(1) {
      display: inline-block;
      width: px2rem(20);
      height: px2rem(20);
      text-align: center;
      line-height: px2rem(20);
      border: 1px solid rgba(0, 0, 0, 0.15);
      border-radius: 50%;
      margin-right: px2rem(10);
      i {
        font-style: normal;
      }
    }
  }
  .steps-card:last-of-type {
    width: auto;
  }
  .steps-card:last-of-type:before {
    width: 0;
  }
  .steps-card.on {
    display: flex;
    align-items: center;
    font-size: px2rem(15);
    color: rgba(0, 0, 0, 0.85);
    span:nth-of-type(1) {
      display: inline-block;
      width: px2rem(20);
      height: px2rem(20);
      text-align: center;
      line-height: px2rem(20);
      background: #286980;
      border: 1px solid #286980;
      color: #fff;
      border-radius: 50%;
      margin-right: px2rem(10);
    }
  }
  .steps-card.on:before {
      background: #286980;
  }
}
</style>
